<template>
    <div class="address-add" :style="style">
        <input-item text-left="收货人名称" text-holder="点击输入" :text-default="receiver" @getText="getReceiver" @blur="receiverVerify" />
        <div class="line"></div>
        <input-item text-left="手机号" text-holder="点击输入" :text-default="phone" :isNumber="isNumber" @getText="getPhone" @blur="phoneVerify" />
        <div class="line"></div>
        <div class="area">
            <div class="line"></div>
            <input-item text-left="所在地区" text-holder="省/市/区" :text-default="getChooseArea" :isDisabled="isDisabled" @click="chooseArea" />
            <area-choose-item num="3" ref="areashow" v-on:getArea="getAreaData" />
        </div>
        <div class="line"></div>
        <input-item text-left="详细地址" text-holder="点击输入" :text-default="detail" @getText="getDetail" @blur="detailVerify" />
        <div class="line"></div>
        <div class="confirm" @click="$refs.confirm.show()">确认兑换</div>
        <confirm ref="confirm" text="是否确定兑换奖励?" @confirm="addressConfirm" />
    </div>
</template>

<script>
import API from '../../request/api';
import InputItem from "@/components/common/input-item";
import AreaChooseItem from "@/components/common/area-choose-item";
import Confirm from "@/components/common/confirm";
import { Toast } from 'vant';

const HEIGHT = document.documentElement.clientHeight + 'px';
export default {
    components: {
        AreaChooseItem,
        InputItem,
        Confirm
    },
    name: "address-edit",
    data() {
        return {
            receiver: '',
            phone: '',
            area: {},
            detail: '',
            verifyFail: {}, // 填写结果验证失败 receiver: true--为失败
            isNumber: true,
            isDisabled: true,
            style: {
                height: HEIGHT
            }
        };
    },
    created() {
    },
    computed: {
        getChooseArea() {
            let areaShow = '';
            if (this.area.province) {
                areaShow = this.area.province.name + this.area.city.name + this.area.county.name;
            }
            return areaShow;
        }
    },
    methods: {
        getReceiver(receiver) {
            this.receiver = receiver;
        },
        getPhone(phone) {
            this.phone = phone;
        },
        getDetail(detail) {
            this.detail = detail;
        },
        receiverVerify(receiver) {
            let isCh = isChinese(receiver);
            console.log('isChinese:', isCh);
            if (isCh) {
                this.receiver = receiver;
                this.verifyFail.receiver = false;
            } else {
                this.$toast({
                    message: '请填写正确的收货人!',
                    duration: 500
                });
                this.verifyFail.receiver = true;
                // this.receiver = '';
            }
        },
        phoneVerify(phone) {
            let isPhone = isMobile(phone);
            console.log('isPhone:', isPhone);
            if (isPhone) {
                this.phone = phone;
                this.verifyFail.phone = false;
            } else {
                this.$toast({
                    message: '手机号码不正确!',
                    duration: 500
                });
                this.verifyFail.phone = true;
            }
        },
        chooseArea() {
            this.$refs.areashow.changeShow();
        },
        getAreaData(data) {
            this.area = data;
        },
        detailVerify(data) {
            let isDe = detailAddress(data);
            if (isDe && data.length >= 5) {
                this.detail = data;
                this.verifyFail.detail = false;
            } else {
                this.verifyFail.detail = true;
                this.$toast({
                    message: '详细地址长度不小于5且不包括特殊字符',
                    duration: 1000
                });
            }
        },
        addressConfirm() {
            let data = {};
            if (this.verifyFail.receiver || this.receiver === '') {
                Toast('请填写正确的收货人');
            } else if (this.verifyFail.phone || this.phone === '') {
                Toast('请填写正确的手机号');
            } else if (this.verifyFail.detail || this.detail === '') {
                Toast('详细地址长度不小于5且不包括特殊字符');
            } else if ((JSON.stringify(this.area)) === '{}') {
                Toast('请选择所在地区');
            } else {
                data.rec_province = this.area.province.id;
                data.rec_city = this.area.city.id;
                data.rec_area = this.area.county.id;
                data.rec_detail = this.detail;
                data.rec_name = this.receiver;
                data.rec_phone = this.phone;
                console.log('address', data);

                this.request.post(API.lotteryCash, {
                    ...this.$route.query,
                    ...data
                }).then((res) => {
                    if (res) {
                        this.$toast({
                            message: '兑换成功',
                            duration: 1500
                        })
                        this.$router.replace('lottery-list')
                    } else {
                        this.$toast({
                            message: '兑换失败',
                            duration: 1500
                        })
                    }
                }).catch((err) => {
                    console.log(err);
                });
            }

        }

    },
};

// 验证是否含有特殊符号
function isChinese(str) {
    let regu = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
    let re = new RegExp(regu);
    if (re.test(str)) {
        return true;
    } else {
        return false;
    }
}

// 详细地址正则
function detailAddress(str) {
    let regu = /^[a-zA-Z0-9_\u4e00-\u9fa5]+[^;=?+$\x22]+$/;
    let re = new RegExp(regu);
    if (re.test(str)) {
        return true;
    } else {
        return false;
    }
}

// 验证手机号码
function isMobile(s) {
    let regu = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;// 手机正则
    if (regu.test(s)) {
        return true;
    } else {
        return false;
    }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/main.styl';

.address-add {
    width: 100%;
}

.line {
    position: relative;
    line();
}

.confirm {
    position: relative;
    top: middleMargin;
    big-solid();
    margin: auto;
}
</style>